<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layout"
      :background="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'

// 类型定义
type PageNumber = number
type LayoutString = string
type PageSizes = number[]

// 分页配置
interface Props {
  modelValue?: PageNumber
  pageSize?: PageNumber
  total?: PageNumber
  pageSizes?: PageSizes
  layout?: LayoutString
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: 1,
  pageSize: 10,
  total: 0,
  pageSizes: () => [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper',
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'size-change', value: number): void
  (e: 'current-change', value: number): void
}>()

const currentPage = computed({
  get: () => props.modelValue,
  set: (value: number) => emit('update:modelValue', value),
})

const pageSize = computed({
  get: () => props.pageSize,
  set: (value: number) => emit('update:pageSize', value),
})

watch(
  () => props.total,
  (newTotal: number) => {}
)

watch(
  () => props.modelValue,
  (newPage: number) => {}
)

watch(
  () => props.pageSize,
  (newSize: number) => {}
)

const handleSizeChange = (val: number) => {
  if (val === props.pageSize) return
  emit('update:pageSize', val)
  emit('size-change', val)
}

const handleCurrentChange = (val: number) => {
  if (val === props.modelValue) return
  emit('update:modelValue', val)
  emit('current-change', val)
}
</script>

<style scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
</style>
